<template>
  <el-card shadow="hover" class="info_card">
      <div>当前时间：{{timeString}}</div>
  </el-card>
  <el-row :gutter="10">
    <el-col :span="12">
      <el-card shadow="hover" style="height: 600px;">
        <el-calendar v-model="value" />
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card shadow="hover" style="height: 600px;">
        <!-- <iframe src="/static/love.html" frameborder="0" width="100%" height="600px" ref="fIframe"></iframe> -->
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref,reactive,onMounted,onUnmounted } from 'vue'
import { errorMsg} from "../utils/message";

// 加载
const loading = ref(true)
// 日历
const value = ref(new Date())
// 获取当前时间
const timeString = ref('')

const time = ()=>{
    // 获取当前时间
    const currentTime = new Date();
    // 格式化年份、月份、日期、小时、分钟和秒数，确保单个数字前面有零
    const year = currentTime.getFullYear();
    const month = ('0' + (currentTime.getMonth() + 1)).slice(-2);
    const date = ('0' + currentTime.getDate()).slice(-2);
    const hours = ('0' + currentTime.getHours()).slice(-2);
    const minutes = ('0' + currentTime.getMinutes()).slice(-2);
    const seconds = ('0' + currentTime.getSeconds()).slice(-2);
    // 将时间格式转换为带有连字符的形式
    timeString.value = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
}

// 创建定时器
let intervalId;
onMounted(()=>{
    intervalId = setInterval(() =>{
        // 更新时间显示
        time()
    }, 1000);
})

// 在组件卸载时清除定时器，防止内存泄漏
onUnmounted(() => {
    clearInterval(intervalId);
});
</script>
<style scoped>
.el-row {
  margin-top: 20px;
}
</style>